<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app9">
    {{ msg }}
</div>
<script type="text/javascript">
    //声明一个数据对象
    var mydata = {msg: 666};

    /*
    * 声明一个Vue实例,dada中所有的属性加入到Vue的响应式系统中
    * 注意只有创建时的属性是响应式的,后加入的属性不会触发任何响应
    * */
    var vm = new Vue({
        el: '#app9',
        data: mydata
    });

    console.log(vm.msg == mydata.msg);//true

    mydata.msg = 777;
    console.log(vm.msg);//777

    vm.msg = 888;
    console.log(mydata.msg);//888

    /*
    * 除了自定义的属性(比如vm.msg),Vue对象还暴露了一些实例属性和方法(比如vm.$el vm.$watch() )
    * */
    console.log(vm.$el);//打印DOM

    vm.$watch('msg', function (newVal, oldVal) {
        console.log(newVal, oldVal);//999 888
    });
    vm.msg = 999//vm.$watch() 监听 msg 改变时调用函数
</script>
</body>
</html>
